<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="/view/common.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'pie.jsp' starting page</title>
    <script src="<%=basePath%>/resource/echarts/js/echarts.js"></script>
    <style type="text/css">
    body{
    background-color:#FFFFFF;
    }
    	.app_list{
    		width:30%;
    		height:50%;
    		float:left;
    		margin-left:10%;
    		margin-top:5%;
    	}
    	.app_year{
    		width:30%;
    		height: 50%;
    		float:right;
    		margin-right: 10%;
    		margin-top:5%;

    	}
    </style>
    <script type="text/javascript">
    require.config({
     packages: [
         {
             name: "echarts",
             location: "../resource/echarts",
             main: "echarts"
         }
     ]
 });
 
 	var categories = [];
	var values = [];
	var jsonArray = new Array();
	var jArray=new Array();
	// 同步执行
	$.ajaxSettings.async = false;
	
	// 加载数据
	$.getJSON("../getPie.do", function (json) {
		console.info(json);
		var data=$.parseJSON(json);
		categories = data.label;
		values = data.value;
		jsonArray=data.json;
	});
    var labArray =jsonArray["label"];
	var valueArray = jsonArray["value"];
    var option = {
    title : {
        text: "应用分类统计",
        x:'center'
    },
    tooltip : {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : "vertical",
        x : "left",
        data:categories
    },
    toolbox: {
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                type: ["pie", "funnel"],
                option: {
                    funnel: {
                        x: "25%",
                        width: "50%",
                        funnelAlign: "left",
                        max: 1548
                    }
                }
            },
        }
    },
    calculable : true,
    series : [
        {
            name:"应用分类统计",
            type:"pie",
            radius : "55%",
            center: ["70%", "70%"],
            data:jsonArray
        }
    ]
};
require(
     [
         "echarts",
         "echarts/chart/pie",
         "echarts/chart/bar"
     ],
     function (ec) {
         var myCharts = ec.init(document.getElementById("app_list"));
         myCharts.setOption(option);
     	console.log(jArray);
     }
 );
    </script>
<!--    
  <script type="text/javascript">
  	setTimeout(function(){
  	require.config({
     packages: [
         {
             name: "echarts",
             location: "${base}/chusumanage/resource/echarts",
             main: "echarts"
         }
     ]
 });
    var options = {
    title : {
        text: "应用年统计",
        x:'center'
    },
    tooltip : {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : "vertical",
        x : "left",
        data:["2013","2014","2015"
        ]
    },
    toolbox: { 
        feature : {
            magicType : {
                type: ["pie", "funnel"],
                option: {
                    funnel: {
                        x: "25%",
                        width: "50%",
                        funnelAlign: "right",
                        max: 1548
                    }
                }
            },
        }
    },
    calculable : true,
    series : [
        {
            name:"应用年统计",
            type:"pie",
            radius : "55%",
            center: ["50%", "60%"],
            data:[
                {value:33, name:"2013"},
                {value:31, name:"2014"},
                {value:24, name:"2015"},
            ]
        }
    ]
};
require(
     [
         "echarts",
         "echarts/chart/pie",
         "echarts/chart/bar"
     ],
     function (ec) {
         var myCharts = ec.init(document.getElementById("app_year"));
         myCharts.setOption(options);
     	console.log(jArray);
     }
 );
  	},500);
  	 
  </script> -->
  </head>  
  <body>
    <div  id="app_list" style="width:200px;height: 200px;margin-top: 100px;">   
    </div>   
    <div class="app_year" id="app_year">    	
    </div>
  </body>
</html>